<!doctype html>
<meta charset="UTF-8">
<title>post</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" media="all">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
 html,
     body {
        height: 100%;
      }

     #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px;padding-top: 30px;
      }
      #push,
 #footer {
        height: 60px;
      }
      #footer {
        background-color: #EEEEEE;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
      .container {
        width: auto;
        max-width: 980px;
      }
      .container .credit {
        margin: 20px 0;
      }
</style>
<body>
<div id="wrap">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container-fluid">
              <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a href="#" class="brand">ProJect</a>
              <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                  <li class="active">
                    <a href="index.html">Home</a>
                  </li>
                  <li>
                    <a href="post.html">Link</a>
                  </li>
                  <li>
                    <a href="list.html">Link</a>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                      Dropdown <strong class="caret"></strong>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="#">Action</a>
                      </li>
                      <li>
                        <a href="#">Another action</a>
                      </li>
                      <li>
                        <a href="#">Something else here</a>
                      </li>
                      <li class="divider"></li>
                      <li class="nav-header">Nav header</li>
                      <li>
                        <a href="#">Separated link</a>
                      </li>
                      <li>
                        <a href="#">One more separated link</a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav pull-right">
                  <li>
                    <a href="#">Link</a>
                  </li>
                  <li class="divider-vertical"></li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                      Dropdown <strong class="caret"></strong>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="#">Action</a>
                      </li>
                      <li>
                        <a href="#">Another action</a>
                      </li>
                      <li>
                        <a href="#">Something else here</a>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="#">Separated link</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-fluid">

      <div class="span2">
        Sidebar content
        <div class="affix">
          <ul class="nav nav-list">
            <li class="active ">
              <a href="#"> <i class="icon-home icon-white"></i>
                首页
              </a>
            </li>
            <li>
              <a href="#"> <i class="icon-book"></i>
                Library
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon-pencil"></i>
                Applications
              </a>
            </li>
            <li>
              <a href="#">
                <i class="i"></i>
                Misc
              </a>
            </li>

          </ul>
          <form class="navbar-search pull-left">
            <input type="text" class="span12 search-query" placeholder="Search"></form>
        </div>
      </div>
      <div class="span10">
        <ul class="breadcrumb">
          <li>
            <a href="#">首页</a>
            <span class="divider">/</span>
          </li>
          <li>
            <a href="#">Library</a>
            <span class="divider">/</span>
          </li>
          <li class="active">Data</li>

        </ul>
        Body content
        <article>
          <h1 class="page-header">
            关于我们
            <small>about</small>
          </h1>
          <p>
            For example,
            <code>&lt;section&gt;</code>
            should be wrapped as inline.For example,Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。
          </p>
          <p>
            Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。
          </p>

          <code> &lt;h1 class="page-header"&gt;关于我们 &lt;small&gt;about&lt;/small&gt;&lt;/h1&gt;</code>

          <p>
            Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。Bootstrap中文网 -- www.bootcss.com 创建于2012年11月末。起因是国内没有较好的关于Bootstrap的中文教程和交流渠道，因此，我们对Bootstrap的文档进行了翻译整理，并且建立了QQ群和微博（@bootcss），方便更多热爱这个CSS框架的攻城师们分享、交流自己在前端设计、开发方面的心得。
          </p>
          <section>
            <h1 class="page-header">展示你的Bootstrap作品</h1>
            <blockquote>
              <p>
                凡是经过确认采用Bootstrap CSS 的网站，我们会将你所提交网站的截图展示到 Bootstrap中文网 的首页，让你得到众多Bootstrap粉丝的羡慕！！！
              </p>
              <p>请发邮件到下面的邮箱，并在邮件标题上注明（Bootstrap网站作品提交 -- 网站名称或网址）。</p>
              <p>
                Mail：
                <a target="_blank" href="mailto:bootcss.com@gmail.com">bootcss.com@gmail.com</a>
              </p>
            </blockquote>
          </section>
          <section id="cooperation">
            <div class="page-header">
              <h1>合作</h1>
            </div>
            <p class="lead">
              Bootstrap中文网致力于前端开发推广，坚持分享、开放的互联网精神，旨在为广大前端攻城师、设计师提供交流的平台，如果你和我们有相同的目标，我们乐意一起携手前行。
            </p>

            <h3>联系方式</h3>
            <ul>
              <li>QQ: 124369963</li>
              <li>
                Mail:
                <a target="_blank" href="mailto:bootcss.com@gmail.com">bootcss.com@gmail.com</a>
              </li>
            </ul>
          </section>
        </article>
        <div class="pagination">
          <ul>
            <li>
              <a href="#">Prev</a>
            </li>
            <li>
              <a href="#">1</a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <li>
              <a href="#">4</a>
            </li>
            <li>
              <a href="#">5</a>
            </li>
            <li>
              <a href="#">Next</a>
            </li>
          </ul>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputIcon">Email address</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">
                <i class="icon-envelope"></i>
              </span>
              <input class="span12" id="inputIcon" type="text">
              &nbsp;
              <input type="submit" value="发送" class="btn btn-success"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <div class="container">
    <p class="muted credit">
      Example courtesy
      <a href="http://martinbean.co.uk">Martin Bean</a>
      and
      <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>
      .
    </p>
  </div>
</div>
</body>